<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>列表过滤</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyword" />
    <ul>
      <li v-for="(p,index) of filPersons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false; // 阻止Vue在启动时生成生产提示。

  // 用watch实现（上方v-for要写filPersons）
  /* 
  const vm = new Vue({
    el: "#root",
    data: {
      keyword: "",
      persons: [
        { id: "001", name: "马冬梅", age: 19, sex: "女" },
        { id: "002", name: "周冬雨", age: 20, sex: "女" },
        { id: "003", name: "周杰伦", age: 21, sex: "男" },
        { id: "004", name: "温兆伦", age: 22, sex: "男" }
      ],
      filPersons: []
    },
    watch: {
      keyword: {
        immediate: true,
        handler(val) {
          this.filPersons = this.persons.filter((p) => {
            return p.name.indexOf(val) !== -1;
          });
        }
      }
    }
  }); 
  */

  // 用computed实现
  const vm = new Vue({
    el: "#root",
    data: {
      keyword: "",
      persons: [
        { id: "001", name: "马冬梅", age: 19, sex: "女" },
        { id: "002", name: "周冬雨", age: 20, sex: "女" },
        { id: "003", name: "周杰伦", age: 21, sex: "男" },
        { id: "004", name: "温兆伦", age: 22, sex: "男" }
      ]
    },
    computed: {
      filPersons() {
        return this.persons.filter((p) => {
          return p.name.indexOf(this.keyword) !== -1;
        });
      }
    }
  });
</script>

</html>